<script setup lang="ts">
import {assetsInfoReq, vulnerabilitiesInfoReq} from "@/api/asset";
import nistReq from "@/utils/nist-req";
import {reactive, ref} from "vue";
import type {VxeGridInstance, VxeGridProps} from "vxe-table";

const xGrid = ref<VxeGridInstance>();
const gridOptions = reactive<VxeGridProps>({
    border:true,
    showHeaderOverflow:true,//当表头内容过长时显示为省略号
    showOverflow:true,//当内容过长时显示为省略号
    keepSource:true,
    id:'vulnerability',
    height:600,
    rowConfig:{
        keyField:'cve_id',
        isHover:true
    },
    columnConfig:{
        resizable:true//启用列宽调整
    },
    customConfig:{
        storage:true,
        // checkMethod({ column }){
        //     return !['nickname', 'role'].includes(column.field);
        // }
    },
    sortConfig:{
        trigger:'cell',
        remote:true
    },
    filterConfig:{
        remote:true
    },
    pagerConfig:{
        pageSize:10,
        pageSizes:[5,10,15,20,50]
    },
    formConfig:{
        titleWidth:100,
        titleAlign:'right',
        items:[
            {
                field:'cve_id',
                title:'CVE编号',
                span:12,
                itemRender:{name:'$input',props:{placeholder:'请输入查询的CVE编号'}}
            },
        ]
    },
    toolbarConfig:{
        refresh:true
    },
    proxyConfig:{
        seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
        sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
        filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
        form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
        // 对应响应结果 { result: [], page: { total: 100 } }
        props: {
            result: 'vulnerabilityList', // 配置响应结果列表字段
            total: 'page.total' // 配置响应结果总页数字段
        },
        ajax:{
            query:async ({page,sorts,filters,form})=>{
                const queryParams = Object.assign({},form)
                const firstSort = sorts[0]
                if (firstSort){
                    queryParams.sort = firstSort.field//排序字段
                    queryParams.order = firstSort.order//排序顺序
                }
                filters.forEach(({field,values})=>{
                    queryParams[field] = values.join(',')
                })
                // console.log(queryParams)
                const response = await vulnerabilitiesInfoReq({'currentPage':page.currentPage,'pageSize':page.pageSize,
                    'cve_id':queryParams.cve_id,'sort':queryParams.sort,'order':queryParams.order,"risk_level":queryParams.risk_level})
                // eslint-disable-next-line no-return-await
                response.data.vulnerabilityList.map((item)=>{
                    return Object.assign(item,{'affectedNum':item.affected.length})
                })
                // console.log(response)
                return response.data
            }
        }
    },
    columns:[
        {
            type:'seq',
            title:'序号',
            width:'5%',
            align:'center'
        },
        {
            field:'cve_id',
            title:'CVE编号',
            width:'20%',
            align:'center',
        },
        {
            field:'risk_level',
            title:"风险等级",
            width:'15%',
            align:'center',
            filters:[
                {label:'严重',value:'CRITICAL'},
                {label: '高风险',value: 'HIGH'},
                {label:'中风险',value: 'MEDIUM'},
                {label: '低风险',value: 'LOW'}
            ],
            slots:{
                default:'tag'
            }
        },
        {
            field:'cvss_v3',
            title:"CVSS版本3.0评分",
            width:'15%',
            align:'center',
            sortable:true
        },
        {
            field:'cvss_v2',
            title:'CVSS版本2.0评分',
            width:'15%',
            align:'center',
            sortable:true
        },
        {
            field:'affectedNum',
            title:'被影响主机数量',
            width:'8%',
            align:'center'
        },
        {
            align:'center',
            slots:{
                default: 'button'
            }
        }
    ]
})
const clickDetail = async (data)=>{
    routerPush('VulnerabilityDetail',{cveId:data.cve_id,riskLevel:data.risk_level})
}
</script>

<template>
  <vxe-grid ref="xGrid" v-bind="gridOptions">
      <template #tag="{row}">
          <el-tag v-if="row.risk_level==='CRITICAL'" color="#8B0000" effect="light">严重</el-tag>
          <el-tag v-else-if="row.risk_level==='HIGH'" color="#FF0000" effect="light">高风险</el-tag>
          <el-tag v-else-if="row.risk_level==='MEDIUM'" color="#FFA500" effect="light">中风险</el-tag>
          <el-tag v-else-if="row.risk_level==='LOW'" color="#008080" effect="light">低风险</el-tag>
      </template>
      <template #button="{row}">
          <el-button type="primary" @click="clickDetail(row)">查看详情</el-button>
      </template>
  </vxe-grid>
</template>

<style scoped>

</style>